La retícula de la versión desktop de mi sitio web está compuesta por 1000 filas de 4px y 12 columnas, lo que permite una organización precisa y modular del contenido. En el formato para dispositivos móviles, la retícula se adapta con una estructura que combina 2 columnas de 2px y 2 columnas de 4px, junto con 4 filas y 2 columnas generales. Esta configuración me permite mantener una coherencia en los espaciados, utilizando siempre múltiplos de cuatro tanto en el eje vertical como en el horizontal, asegurando consistencia en ambas versiones: desktop y móvil.

La tipografía utilizada es coherente tanto en la versión desktop como en la versión móvil. Se emplean dos fuentes de estilo palo seco, que ofrecen una amplia gama de pesos: light, regular, medium, bold e italic. Las tipografías con mayor peso jerárquico corresponden al estilo display. En la versión desktop se utilizan jerarquías tipográficas que van desde H1 hasta H6, siendo H4 el destinado al cuerpo de texto principal. Todos los tamaños están especificados tanto en pixeles como en unidades rem, lo que facilita la adaptabilidad y la consistencia visual. El interlineado está configurado en modo auto y el interletrado permanece en 0% en ambos formatos. Además, todo el sistema tipográfico se presenta en caja baja, y se ha definido la longitud de línea recomendada para cada jerarquía (mínimo y máximo en píxeles), con el objetivo de mantener una legibilidad óptima.

La paleta de colores está diseñada en coherencia con los principios y valores que busca transmitir el sistema de diseño: serenidad, equilibrio y conexión con lo natural. Por ello, se ha optado por una gama de colores suaves, definidos como ecológicos, naturales y armoniosos. A través de la elección cromática, la composición y la armonía visual, se pretende generar una experiencia calmada y fluida, evitando la sobreestimulación del usuario. La clave es comunicar tranquilidad y equilibrio visual. La estructura de color se compone de: Color primario: un tono base al que se le modifica la luminosidad para generar variantes dentro de la misma gama.
Colores semánticos: incluyen tonos para error, verificación y elementos destacados, usados con intención comunicativa clara.
Colores neutros: una escala de grises, junto con blancos y negros, principalmente aplicados en textos y fondos. El fondo general es un gris suave y tranquilo.
Colores de acento: dos tonos complementarios —amarillo anaranjado y morado oscuro— empleados estratégicamente en elementos clave o destacables de la interfaz.

Las imágenes incluidas en este sistema de diseño deben transmitir una estética minimalista, limpia y fresca, en línea con los valores que representa la marca para la que se aplica este UI Kit. Estas imágenes utilizarán la misma paleta cromática definida en el sistema, permitiendo destacar sin acaparar protagonismo. Además, podrán integrarse con elementos del sistema como tarjetas (cards) o botones, fomentando la interacción. Predominarán los fondos neutros, y el color verde —como tono principal del sistema— tendrá un papel destacado visualmente.

Mi barra de navegación está compuesta por el logo de la marca correspondiente, que servirá como enlace a la página principal. A su lado, se encuentra un enlace que dirige a la sección de información de la marca, bajo el título "Quiénes somos", resaltado con una tipografía más grande y en el color principal. En el lado derecho de la barra, se ubican el buscador y los iconos para la cesta de compras y el perfil de usuario.

Los botones en este sistema de diseño se caracterizan por su simplicidad y coherencia visual. Todos presentan bordes redondeados y se dividen en varias categorías: botones primarios y secundarios, disponibles en tamaños largo y mediano, y pueden incluir tanto texto como iconos. Los botones primarios siguen la paleta cromática principal del sistema, mientras que los botones secundarios se distinguen por tener un borde negro y un fondo blanco, generando un contraste visual que los diferencia claramente de los primarios. También se incluyen botones "ghost", sin relleno ni fondo, pensados para usos más discretos. Por último, existen botones informativos, que emplean colores semánticos del sistema para destacar mensajes clave o estados del sistema. Todos los botones están diseñados con diferentes estados visuales: hover, enable, focus y disable, asegurando una experiencia de usuario clara e intuitiva.

Mi tabla de datos está diseñada de manera sencilla y clara, con formas redondeadas y ondulantes que armonizan con todo el estilo visual. Incluye campos como el correo electrónico, número de teléfono y otros datos necesarios. Además, se muestra su funcionamiento tanto en el modo claro como en el modo oscuro para escritorio.

Mi formulario está compuesto por bloques de información esencial, aunque no se especifica el contenido exacto, ya que al tratarse de un UI Kit, el texto que se aplique a cada sección será editable y libre. Aproximadamente a mitad del diseño, se incluirá una opción desplegable. Al final del formulario se ubicará un botón de envío, clasificado como botón primario, que contará con un efecto hover al pasar el cursor sobre él. El modo oscuro adaptará automáticamente los colores según el esquema del diseño. Además, contará con un diseño responsive, lo que le permitirá adaptarse a cualquier cambio de formato, como la visualización en pantallas más pequeñas, garantizando su funcionalidad en dispositivos móviles.

Las cards diseñadas para mi UI-Kit son totalmente responsive, adaptándose tanto al formato de dispositivos móviles como a su orientación, ya sea vertical u horizontal. Mi diseño, al igual que el de toda la página web, se caracteriza por ser sencillo, limpio y minimalista, evitando la saturación de elementos; por eso, las cards son muy simples y funcionales. Cuento con dos estilos de cards que se distinguen principalmente por su color: una versión clara y otra oscura, esta última capaz de ajustarse automáticamente al modo oscuro. Cada card está compuesta por tres niveles de texto y un botón que permite añadir el producto al carrito. Además, incluyen otros elementos interactivos o botones que son claros y visualmente accesibles para mejorar la experiencia del usuario.

Los enlaces cuentan con varios tamaños, tanto medianos como pequeños, y están optimizados para su uso en dispositivos móviles y de escritorio. Los colores de los links varían según su estado, y no siguen el mismo esquema que los botones, ya que utilizan colores de acento y neutros. Estos enlaces pueden presentarse solos o acompañados de un icono y texto. Un ejemplo de su aplicación sería en la barra de navegación de la página.

Los espaciados definidos en el diseño del UI-kit están pensados para aplicarse en todos los elementos de la página web, tanto en escritorio como en dispositivos móviles. Estos espaciados, tanto verticales como horizontales, están especificados en píxeles (px) para asegurar coherencia y armonía visual en toda la interfaz.

Los iconos utilizados en mi sistema de diseño provienen de un banco de iconos. Los que se muestran aquí representan todas las variaciones de color contempladas en el sistema: color primario, acento y neutros. Aunque cuento con una mayor variedad, estos son los seleccionados para la presentación del UI kit. Mantienen una estética coherente: redondeada, atractiva, pero al mismo tiempo sobria y minimalista. Considero que son ideales para su aplicación en la web.

La inspiración para este sistema de diseño proviene de referencias reales, principalmente páginas web de productos ecológicos, como el Herbolario Navarro de Madrid. Este ejemplo me ayudó a comprender aspectos clave como la composición, la jerarquía visual y la presentación de información esencial. Sin embargo, para las decisiones relacionadas con la estética y la composición visual, recurrí especialmente a la tienda Natura, cuya propuesta visual me parece muy armoniosa. Los colores están aplicados con coherencia y su enfoque es limpio, minimalista y claro: exactamente las cualidades que quería reflejar en mi sistema de diseño. Además de sitios web, también me inspiré en elementos ajenos al mundo digital. Referencias como la estética espiritual, las verduras, las flores, las plantas y los diferentes materiales utilizados en el packaging de productos ecológicos me ofrecieron una base rica y diversa sobre la cual construir mi UI Kit.